<template>
  <el-card
    shadow="never"
    body-style="padding: 20px;"
    style="height: 270px"
  >
    <div style="height: 20px; margin-top: 5px">
      <el-divider content-position="left">
        <h3>{{ assetInfo.name }}</h3>
      </el-divider>
    </div>
    <div style="margin: 10px 25px">
      <ul class="type-info">
        <li>
          <p>资产标识:</p>
          <p>{{ assetInfo.key }}</p>
        </li>
        <li>
          <p>资产类型:</p>
          <p>{{ assetInfo.type.name }}</p>
        </li>
        <li>
          <p>负责人:</p>
          <p>{{ assetInfo.manage.name }}</p>
        </li>
        <li>
          <p>漏洞数量:</p>
          <p>{{ assetInfo.vuln_count }}</p>
        </li>
        <li>
          <p>创建时间:</p>
          <p>{{ assetInfo.add_time | toDateString }}</p>
        </li>
        <li>
          <p>更新时间:</p>
          <p>{{ assetInfo.update_time | toDateString }}</p>
        </li>
      </ul>
      <p>资产描述:</p>
      <p style="text-indent: 2em">{{ assetInfo.description }}</p>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'AssetInfo',
  computed: {
    assetInfo() {
      return this.$store.state.asset.assetInfo
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  list-style: none;
}
.type-info {
  li {
    display: block;
    height: 25px;
    p {
      display: inline-block;
    }
  }
}
.type-name {
  width: 100px;
}
.type-edit {
  color: #57a2ff;
  cursor: pointer;
  float: right;
  //     right: 15px;
  //   bottom: 15px;
}
.tab-content {
  padding: 10px;
}
</style>
